:root {
  --dropdown-border-color: rgba(0, 0, 0, 0.064);
}

.Dropdown {
  position: relative;
}

.Dropdown-content {
  opacity: 0; /* start invisible */
  pointer-events: none; /* and without any clicks */
  z-index: 20;
  position: absolute;
  top: 40px;
  min-width: 200px;
  margin-top: 18px;
  border: 1px solid var(--dropdown-border-color);
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12);
  background-clip: padding-box;
  padding-top: 1em;
  padding-bottom: 1em;
}

.Dropdown-content:before {
  position: absolute;
  top: -20px;
  right: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-right: 5px solid red;
  content: "";
  display: block;
}

/* switching from home rolled to BS logic for dropdowns so we still have both classes */
.Dropdown.open .Dropdown-content,
.Dropdown--showing.Dropdown-content {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.3s linear, margin 0.2s linear;
  margin-top: 0;
}

.Dropdown-item {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  line-height: 1;
}

.Dropdown .Dropdown-item .link:hover {
  text-decoration: none;
}

.Dropdown-item:hover {
  color: #fff;
  background-color: var(--brand-color);
}

.Dropdown .Dropdown-item:hover {
  text-decoration: none;
}
